<!--
 * @Author: 陈心怡
 * @Date: 2024-09-19 19:13:29
 * @LastEditors: 陈心怡
 * @LastEditTime: 2024-09-20 17:41:44
 * @FilePath: \vue3-web-study\src\components\top-theme\index.vue
 * @Description: 
-->
<template>
  <div
    class="flex flex-center flex-column top-theme"
    :style="{
      height,
      background: `url(${comBg}) no-repeat center/cover`
    }"
  >
    <h3>{{ title }}</h3>
    <p>{{ des1 }}</p>
    <p>{{ des2 }}</p>
  </div>
</template>

<script setup>
defineOptions({
  name: 'TopTheme',
  computed: {
    comBg() {
      return this.$utils.getImg(this.bg)
    }
  }
})

defineProps({
  bg: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: ''
  },

  title: {
    type: String,
    default: ''
  },
  des1: {
    type: String,
    default: ''
  },
  des2: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.top-theme {
  text-align: center;
  font-size: 22px;
  color: #fff;
  h3 {
    margin-bottom: 25px;
    font-size: 44px;
  }
  & > p {
    font-size: 22px;
    line-height: 34px;
  }
}
</style>
